<template lang="pug">
.list
  .material-section
    .material-section-title 材料一级分类：
    .material-section-list
      .material-section-item(v-for="(item, index) in firstCateList" :key="index")
        span(:class="!item.isSelected ? '' : 'is-selected'" @click.stop="clickCateItem(item)") {{ item.classificationName }}
  .material-section
    .material-section-title 热门供应商设置：
    .material-section-list
      .material-section-item(v-for="(item, index) in hotSupplierList" :key="index")
        .material-image-body
          i(class="el-icon-circle-close" @click.stop="unSetSupplier(item)")
          .supplier-logo
            img(:src="item.logoUrl" style="width:320px; height:200px")
            .supplier-logo-label
              label {{ item.companyName }}
      .material-section-item
        .el-supplier-btn(@click="openSupplierDialog")
          .iconfont.icon-tianjia
          .add-supplier-btn-txt 添加供应商
  add-supplier-dialog(
    :show="showSupplierDialog"
    :parentId="firstCateId"
    @close="closeSupplierDialog"
  )
</template>

<script>
import { getChildrenClassifications, getHotSupplierList, setHotSupplier } from 'api'
import addSupplierDialog from '@/components/modal/addSupplierDialog'
export default {
  name: 'hotSupplierManage',
  data () {
    return {
      firstCateList: [],
      hotSupplierList: [],
      firstCateId: '',
      showSupplierDialog: false
    }
  },
  components: {
    addSupplierDialog
  },
  methods: {
    async getCateList (id = 0) {
      try {
        const { ResultSet } = await this.$axios.post(getChildrenClassifications, { classificationId: id })
        this.firstCateList = (ResultSet.userData.childrenNode || []).map(item => {
          item.isSelected = false
          return item
        })
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    async getHotSupplierList () {
      try {
        const { ResultSet } = await this.$axios.post(getHotSupplierList, { classificationId: this.firstCateId })
        this.hotSupplierList = ResultSet.userData.setList || []
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    init () {
      this.getCateList()
    },
    openSupplierDialog () {
      this.showSupplierDialog = true
    },
    closeSupplierDialog () {
      this.showSupplierDialog = false
      if(this.firstCateId) {
        this.getHotSupplierList()
      }
    },
    unSetSupplier (item) {
      this.$confirm('是否确定取消该热门供应商设置？', '取消提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        //取消热门供应商
        if (!this.firstCateId) {
          this.$message.error('请选择材料一级分类！')
          return
        }
        try {
          let query = {
            classificationId: this.firstCateId,
            supplierId: item.id
          }
          await this.$axios.post(setHotSupplier, { ...query })
          this.$message.success('取消成功！')
          this.getHotSupplierList()
        } catch (err) {
          console.log(err)
          this.$message.error(err.message || err.ResultSet.errors)
        }
      }).catch((e) => {
        console.log(e)
      })
    },
    clickCateItem (item) {
      let id = item.classificationId
      this.firstCateId = id
      this.firstCateList = this.firstCateList.map(el => {
        if(id === el.classificationId) {
          el.isSelected = true
        } else {
          el.isSelected = false
        }
        return el
      })
      //获取分类热门供应商
      this.getHotSupplierList()
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.init()
    })
  }
}
</script>

<style lang="scss" scoped>
.list {
  width: 100%;
  min-height: 100%;
  background: #FFFFFF;
  border: 1px solid #F3F3F4;
  box-sizing: border-box;
  box-shadow: 0px 4px 0px #F3F3F4;
  border-radius: 10px;
  padding: 0 40px;
}
.material-section {
  padding: 16px 0;
  display: flex;
}
.material-section-title {
  font-size: 16px;
  line-height: 24px;
  color: #3E4373;
  margin-right: 16px;
}
.material-section-list {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
}
.material-section-item {
  padding-right: 24px;
  padding-bottom: 24px;
  span {
    display: inline-block;
    font-size: 14px;
    line-height: 24px;
    color: #B2B4C7;
    background: #FFFFFF;
    border: 1px solid #B2B4C7;
    border-radius: 3px;
    padding: 3px 16px;
    cursor: pointer;
    &:hover {
      color: #EE0A24;
      border: 1px solid #EE0A24;
    }
    &.is-selected {
      color: #F3F3F4;
      background: #EE0A24;
      border: 1px solid #EE0A24;
      &:hover {
        color: #B2B4C7;
      }
    }
  }
}
.material-image-body {
  position: relative;
}

.el-supplier-btn {
  width: 320px;
  height: 200px;
  background: #fff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #B2B4C7;
  border: 1px solid #c0ccda;
  cursor: pointer;
  &:hover {
    border-color: #FF708B;
    color: #FF708B;
  }
  .iconfont {
    font-size: 20px;
    font-weight: bold;
  }
  .add-supplier-btn-txt {
    font-size: 14px;
  }
}
.el-icon-circle-close {
  position: absolute;
  top: -10px;
  right: -10px;
  z-index: 1;
  font-size: 20px;
  color: #EE0A24;
  cursor: pointer;
}
.supplier-logo {
  width: 320px;
}
.supplier-logo-label {
  font-size: 16px;
  line-height: 24px;
  color: #3E4373;
  font-weight: bold;
  margin-top: 10px;
}
</style>
